import MyIcon from '@/components/MyIcon';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Button } from 'antd';
import React, { Ref, useRef } from 'react';
import { IRoleConfimStateModal } from '../type';

export const RoleConfimStateModal: React.FC<IRoleConfimStateModal> = ({
  onClose,
  visible,
  chanageSwitch,
  tableRowObj,
}) => {
  const confirmRef: Ref<IOneModalRef> = useRef(null); //弹框的ref

  // 关闭modal
  const onCloseModal = () => {
    if (confirmRef) {
      if (confirmRef.current) {
        if (confirmRef.current.onModalCancel) {
          confirmRef.current.onModalCancel();
        }
      }
    }
  };

  // 处理提示信息
  const getTipStr = () => {
    let tip = `禁用后，该角色及其下属角色均会级联关闭，是否确认禁用？`;
    if (tableRowObj?.pIsOpen == 0) {
      tip = `对不起，该角色上级角色已被禁用。请先启用上级角色！`;
    }
    return tip;
  };

  // 点击按钮调用接口
  const clickOnOk = () => {
    if (tableRowObj?.pIsOpen == 0) {
      onCloseModal();
    } else {
      chanageSwitch(false, tableRowObj);
      onCloseModal();
    }
  };

  return (
    <>
      <OneModal
        ref={confirmRef}
        open={true}
        getContainer={false}
        title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span
              style={{ marginRight: 10, fontSize: '24px', color: '#faad14' }}
            >
              <MyIcon type="icon-info-circle" />
            </span>
            <span>{`禁用角色`}</span>
          </div>
        }
        width={document.body.clientWidth * 0.2}
        onCancel={onClose}
        footer={
          <>
            <div
            // className={modalStyles['dept-update-btn']}
            >
              <Button onClick={onCloseModal}>取消</Button>
              <Button type={'primary'} onClick={clickOnOk}>
                确定
              </Button>
            </div>
          </>
        }
        bodyStyle={{
          padding: '15px 30px',
        }}
      >
        <div style={{ fontSize: '18px', color: '#ff000d' }}>{getTipStr()}</div>
      </OneModal>
    </>
  );
};
